<template>
  <div>
    <div class="header">
      <div class="header-content">
        <div class="logo" @click="jump">
          <span class="iconfont icon-pan"></span>
          <span class="name">超级网盘</span>
        </div>
      </div>
    </div>
    <div class="share-body">
      <template v-if="Object.keys(shareInfo).length == 0">
        <div class="no-data">
          <div class="no-data-inner">
            <Icon iconName="no_data" :width="150" fit="fill"></Icon>
            <div class="tips">{{ errorMsg }}</div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="share-panel">
          <div class="share-user-info">
            <div class="avatar">
              <Avatar
                :userId="shareInfo.userId"
                :avatar="shareInfo.avatar"
                :width="50"
              ></Avatar>
            </div>
            <div class="share-info">
              <div class="user-info">
                <span class="nick-name">{{ shareInfo.nickName }}</span>
                <span class="share-time"
                  >分享于：{{ shareInfo.createTime }}</span
                >
              </div>
              <div class="file-name">分享文件：{{ shareInfo.fileName }}</div>
            </div>
          </div>
          <div class="share-op-btn">
            <el-button
              type="primary"
              @click="cancelShare"
              v-if="shareInfo.currentUser"
              ><span class="iconfont icon-cancel"></span>取消分享</el-button
            >
            <el-button
              type="primary"
              @click="save2MyPanBatch"
              :disabled="selectedIdList.length == 0"
              v-else
            >
              <span class="iconfont icon-import"></span>保存到我的网盘
            </el-button>
          </div>
        </div>
        <Navigation
          ref="navigationRef"
          @navChange="navChange"
          :shareId="shareId"
        ></Navigation>
        <div class="file-list">
          <Table
            ref="dataTableRef"
            :columns="columns"
            :dataSource="tableData"
            :fetch="loadDataList"
            :initFetch="false"
            :options="tableOptions"
            @rowSelected="rowSelected"
          >
            <template #fileName="{ index, row }">
              <div
                class="file-item"
                @mouseenter="showOp(row, 1)"
                @mouseleave="showOp(row, 0)"
              >
                <!-- 图片、视频的图标为封面图片，转码成功的 -->
                <template
                  v-if="
                    (row.fileType == 1 || row.fileType == 3) && row.status == 2
                  "
                >
                  <Icon :cover="row.fileCover" :width="32"></Icon>
                </template>
                <template v-else>
                  <!-- 其他文件根据文件类型显示图标 -->
                  <Icon
                    v-if="row.fileClass == 1"
                    :fileType="row.fileType"
                  ></Icon>
                  <!-- 文件夹图标fileType=0 -->
                  <Icon v-if="row.fileClass == 2" :fileType="0"></Icon>
                </template>

                <span class="file-name" :title="row.fileName">
                  <span @click="clickFile(row)">{{ row.fileName }}</span>
                </span>

                <span class="op">
                  <template v-if="row.showOp">
                    <!-- 仅文件可下载 -->
                    <span
                      class="iconfont icon-download"
                      title="下载"
                      @click="download(row)"
                      v-if="row.fileClass == 1"
                      >下载</span
                    >
                    <span
                      class="iconfont icon-import"
                      title="删除"
                      @click="save2MyPan(row)"
                      v-if="!shareInfo.currentUser"
                      >保存到我的网盘</span
                    >
                  </template>
                </span>
              </div>
            </template>
            <template #fileSize="{ index, row }">
              <span v-if="row.fileSize">{{
                proxy.Utils.size2Str(row.fileSize)
              }}</span>
            </template>
          </Table>
        </div>
      </template>

      <!-- 文件夹选择框组件 -->
      <FolderSelect
        ref="folderSelectRef"
        @folderSelect="save2MyPanDone"
      ></FolderSelect>

      <!-- 文件预览组件 -->
      <Preview ref="previewRef"></Preview>
    </div>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const api = {
  getShareInfo: "/webShare/getShareInfo",
  loadFileList: "/webShare/loadFileList",
  createDownloadCode: "/webShare/createDownloadCode",
  saveShare: "/webShare/saveShare",
  cancelShare: "/share/cancelShare",
};

const shareInfo = ref({});
const shareId = route.params.shareId;
const errorMsg = ref(null);

// 获取分享登录信息
const getShareInfo = async () => {
  let result = await proxy.Request({
    url: api.getShareInfo,
    showLoading: false,
    params: {
      shareId: shareId,
    },
    showError: false,
    errorCallback: (error) => {
      if (error.code == 902) {
        errorMsg.value = "抱歉，您访问的分享链接不存在或已过期~";
      } else if (error.code == 903) {
        errorMsg.value = "你来晚了！分享的文件已经被删除了！";
      }
    },
  });

  if (!result) {
    return;
  }

  // 未校验提取码，跳转校验页面
  if (result.data == null) {
    router.push(`/shareCheck/${shareId}`);
    return;
  }

  shareInfo.value = result.data;
};

getShareInfo();

const columns = [
  {
    label: "文件名",
    prop: "fileName",
    scopedSlots: "fileName",
    minWidth: 360,
  },
  {
    label: "修改时间",
    prop: "updateTime",
    width: 200,
  },
  {
    label: "大小",
    prop: "fileSize",
    width: 200,
    scopedSlots: "fileSize",
  },
];

const dataTableRef = ref({});
const tableData = ref({});
const tableOptions = ref({
  exHeight: 80,
  selectType: "checkbox",
});

// 当前目录
const currentFolder = ref({ fileId: "0" });

// 加载文件列表
const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
    shareId: shareId,
    filePid: currentFolder.value.fileId,
  };

  let result = await proxy.Request({
    url: api.loadFileList,
    params: params,
  });

  if (!result) {
    return;
  }

  tableData.value = result.data;
};

const previewRef = ref();
// 点击文件
const clickFile = (data) => {
  // 文件夹点击进入
  if (data.fileClass == 2) {
    navigationRef.value.openFolder(data);
    return;
  }
  data.shareId = shareId;
  previewRef.value.showPreview(data, 2);
};

const navigationRef = ref();
// 导航回调方法
const navChange = (data) => {
  const { currFolder } = data;
  currentFolder.value = currFolder;

  loadDataList();
};

// 展示操作按钮
const showOp = (row, type) => {
  // 遍历所有文件列表，隐藏全部文件的操作按钮
  tableData.value.list.forEach((item) => {
    item.showOp = false;
  });
  // 显示当前文件的操作按钮
  if (type == 1) {
    row.showOp = true;
  }
};

// 已选中的文件列表
const selectedIdList = ref([]);
// 选中文件操作
const rowSelected = (rows) => {
  selectedIdList.value = [];
  rows.forEach((item) => {
    selectedIdList.value.push(item.fileId);
  });
};

// 下载文件
const download = async (row) => {
  let result = await proxy.Request({
    url: api.createDownloadCode + "/" + shareId + "/" + row.fileId,
  });

  if (!result) {
    return;
  }

  window.location.href = proxy.globalInfo.downloadUrl + result.data;
};

const folderSelectRef = ref();
const saveFileIdList = ref([]); // 要保存的文件

// 保存文件到我的网盘
const save2MyPan = (row) => {
  // 用户登录则跳转登录页面
  if (!proxy.VueCookies.get("userInfo")) {
    router.push(`/login?redirectUrl=${route.path}`);
    return;
  }

  saveFileIdList.value = [row.fileId];
  folderSelectRef.value.show();
};

// 批量保存文件到我的网盘
const save2MyPanBatch = () => {
  if (selectedIdList.value.length == 0) {
    return;
  }

  // 用户登录则跳转登录页面
  if (!proxy.VueCookies.get("userInfo")) {
    router.push(`/login?redirectUrl=${route.path}`);
    return;
  }

  saveFileIdList.value = selectedIdList.value;
  folderSelectRef.value.show();
};

// 保存文件操作
const save2MyPanDone = async (folderId) => {
  let result = await proxy.Request({
    url: api.saveShare,
    params: {
      shareId: shareId,
      shareFileIds: saveFileIdList.value.join(","),
      targetFolderId: folderId,
    },
  });

  if (!result) {
    return;
  }
  proxy.Message.success("保存成功");
  folderSelectRef.value.close();

  loadDataList();
};

// 取消分享
const cancelShare = () => {
  proxy.Confirm("你确定要取消分享吗？", async () => {
    let result = await proxy.Request({
      url: api.cancelShare,
      params: {
        shareIds: shareId,
      },
    });

    if (!result) {
      return;
    }

    proxy.Message.success("取消分享成功");
    router.push("/");
  });
};

// 跳转首页
const jump = () => {
  router.push("/");
};
</script>
<style lang="scss" scoped>
@import "@/assets/file_list.scss";

.header {
  width: 100%;
  position: fixed;
  background: #0c95f7;
  height: 50px;

  .header-content {
    width: 70%;
    margin: 0 auto;
    color: #fff;
    line-height: 50px;

    .logo {
      display: flex;
      align-items: center;
      cursor: pointer;

      .icon-pan {
        font-size: 40px;
      }

      .name {
        font-weight: bold;
        margin-left: 5px;
        font-size: 25px;
      }
    }
  }
}

.share-body {
  width: 70%;
  margin: 0 auto;
  padding-top: 50px;

  .share-panel {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;

    .share-user-info {
      flex: 1;
      display: flex;
      align-items: center;

      .avatar {
        margin-right: 5px;
      }

      .share-info {
        .user-info {
          display: flex;
          align-items: center;

          .nick-name {
            font-size: 15px;
          }

          .share-time {
            margin-left: 20px;
            font-size: 12px;
          }
        }

        .file-name {
          margin-top: 10px;
          font-size: 12px;
        }
      }
    }
  }
}

.file-list {
  margin-top: 10px;

  .file-item {
    .op {
      width: 170px;
    }
  }
}
</style>
